<template>
  <div>

    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="16" justify="space-between">
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex items-center">
              <el-avatar :src="avatar" :size="70" class="mr-16px">
                <img src="@/assets/imgs/avatar.gif" alt=""/>
              </el-avatar>
              <div>
                <div class="text-20px">
                  {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
                </div>
                <div class="mt-10px text-14px text-gray-500">
                  {{ t('workplace.toady') }}，20℃ - 32℃！
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>

  <el-row class="mt-8px" :gutter="8" justify="space-between">
    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="h-3 flex justify-between">
            <span>{{ t('workplace.shortcutOperation') }}</span>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">
              <div class="flex items-center">
                <Icon :icon="item.icon" class="mr-8px" :style="{ color: item.color }"/>
                <el-link type="default" :underline="false" @click="handleShortcutClick(item.url)">
                  {{ item.name }}
                </el-link>
              </div>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>
      <el-card shadow="never" class="mt-8px">
        <template #header>

          <span>协同待办</span>
          <div style=" float: right;">
            <!--            <el-select-->
            <!--                style=" width: 90px; margin: 0"-->
            <!--                v-model="taskFinishState"-->
            <!--                @change="taskFinishStateChange"-->
            <!--            >-->
            <!--              <el-option label="已完成" value="已完成"/>-->
            <!--              <el-option label="未完成" value="未完成"/>-->
            <!--            </el-select>-->
            <el-input
                style="width: 100px"
                v-model="taskName"
                placeholder="回车搜索"
                clearable
                @keyup.enter="getListTask"
            />
          </div>
        </template>
        <el-tabs v-model="taskActiveName" @tab-change="handleClick">
          <el-tab-pane v-if="taskFinishState=='未完成'" key="waitExecute" name="waitExecute">
            <template #label>
              <el-badge :value="badgeSynergy.waitExecuteNum" :offset="[10, 0]" class="item">
                <span><i class="el-icon-s-fold"></i> 我未执行</span>
              </el-badge>
            </template>
          </el-tab-pane>
          <el-tab-pane key="finishExecute" name="finishExecute">
            <template #label>
              <el-badge :value="badgeSynergy.finishExecuteNum" :offset="[10, 0]" class="item">
                <span><i class="el-icon-s-fold"></i> 我已执行</span>
              </el-badge>
            </template>
          </el-tab-pane>
          <el-tab-pane key="create" name="create">
            <template #label>
              <el-badge :value="badgeSynergy.createNum" :offset="[10, 0]" class="item">
                <span><i class="el-icon-s-promotion"></i> 我发起的</span>
              </el-badge>
            </template>
          </el-tab-pane>
          <el-tab-pane key="assist" name="assist">
            <template #label>
              <el-badge :value="badgeSynergy.assistNum" :offset="[10, 0]" class="item">
                <span><i class="el-icon-s-promotion"></i> 我协助的</span>
              </el-badge>
            </template>
          </el-tab-pane>
        </el-tabs>
        <el-empty v-if="taskList.length<=0" :image-size="300"/>

        <div v-else v-for="task in taskList" :key="task.id">
          <el-row :gutter="10">
            <el-col :xs="24" :xl="14">
              <div style="display: flex; align-items: center;margin-bottom:3px">
                <dict-tag :type="DICT_TYPE.BUSINESS_PRIORITY" :value="task.priority"/>
                <el-checkbox v-if="taskActiveName==='create'&&task.finishState==='未完成'"
                             style="padding: 0 8px"
                             :checked="task.finishState === '已完成'"
                             @change="updateFinishState($event,task)"
                />
                <el-link class="text-ellipsis" @click=" projectTaskDetailsRef.showVisible(task)">{{
                    task.taskName
                  }}
                </el-link>

              </div>
            </el-col>

            <el-col :xs="24" :xl="10">
              <el-link> {{ task.projectId_dictText }}</el-link>
              <el-tag
                  v-if="task.deadline && compareTime(task.deadline, new Date()) === true&&task.finishState!=='已完成'"
                  type="warning"
              >
                {{ parseTime(task.deadline, '{m}-{d} {h}:{i}') + '截止' }}
              </el-tag>
              <el-tag
                  v-else-if="task.deadline && compareTime(task.deadline, new Date()) === false &&task.finishState!=='已完成'"
                  type="danger"
              >
                {{ parseTime(task.deadline, '{m}-{d} {h}:{i}') + '已超时' }}
              </el-tag>


            </el-col>
          </el-row>

          <el-divider/>
        </div>

      </el-card>
    </el-col>
    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
      <el-card shadow="never">
        <template #header>
          <div class="h-3 flex justify-between">
            <span>收藏的项目</span>
            <el-button
                type="primary"
                @click="handleMenuPush('synergy/project/project-list');">
              <Icon icon="ep:view" class="mr-5px"/>
              查看全部项目
            </el-button>
          </div>
        </template>
        <el-skeleton :loading="loading" animated>
          <el-row>
            <el-col
                v-for="(item, index) in projectList"
                :key="`card-${index}`"
                :xl="8"
                :lg="8"
                :md="8"
                :sm="24"
                :xs="24"
            >
              <el-card
                  shadow="hover"
                  class="mr-5px mt-5px cursor-pointer"
                  @click="handleProjectClick(item)"
              >
                <div class="flex items-center">
                  <!--                  <Icon-->
                  <!--                    :icon="item.icon"-->
                  <!--                    :size="25"-->
                  <!--                    class="mr-8px"-->
                  <!--                    :style="{ color: item.color }"-->
                  <!--                  />-->
                  <el-image style="width: 80px;height: 80px" :src="item.projectImg"
                            fit="contain"
                  />
                  <span class="text-16px">{{ item.projectName }}</span>
                </div>
                <div class="mt-12px text-12px text-gray-400">{{
                    item.remark ? item.remark : '暂无简介'
                  }}
                </div>
                <div class="mt-12px flex justify-between text-12px text-gray-400">
                  <span>{{ item.personal }}</span>
                  <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-skeleton>
      </el-card>

    </el-col>

  </el-row>

  <el-affix   :offset="800">
    <el-button type="primary">发起协同</el-button>
  </el-affix>
  <el-dialog
      title="评价"
      v-model="rateVisible"
      width="30%"
  >
    <el-form ref="formRef" :model="form" label-width="100px">
      <el-form-item label="满意程度：" prop="score">
        <el-rate v-model="form.score"/>
      </el-form-item>
      <el-form-item label="评论：" prop="scoreDesc">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.scoreDesc"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="rateVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFinish">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <ProjectTaskDetails ref="projectTaskDetailsRef" @success="getListTask"/>
</template>
<script setup>

import {formatTime} from '@/utils'

import {useUserStore} from '@/store/modules/user'
import router from "@/router";
import {DICT_TYPE} from "@/utils/dict";
import ProjectTaskDetails from "@/views/business/synergy/project/components/ProjectTaskDetails.vue";
import {compareTime} from "@/utils/nayun";
import {parseTime} from "../../utils/nayun";
import {ProjectTaskApi} from "@/api/business/synergy/project/task";
import {ProjectListApi} from "@/api/business/synergy/project/list";


const message = useMessage() // 消息弹窗

const {t} = useI18n()
const userStore = useUserStore()
const loading = ref(true)
const avatar = userStore.getUser.avatar
const username = userStore.getUser.nickname
const userId = userStore.getUser.id
const taskName = ref('')
const taskFinishState = ref('未完成')
const projectList = ref([])
const taskList = ref([])

const projectQueryParams = ref({})
const taskActiveName = ref('waitExecute')

const form = ref({})
const flowList = ref([])
const rateVisible = ref(false)
const badgeSynergy = ref({})

const projectTaskDetailsRef = ref(null)

defineOptions({name: 'Index'})


//快接入口
let shortcut = reactive < [] > ([])


const handleShortcutClick = (url) => {
  router.push(url)
}


const getListProject = async () => {
  let data = await ProjectListApi.getProjectListPage({state: 'collect'})
  projectList.value = data.list

}

const getListTask = async () => {
  const taskQueryParams = {
    pageNo: 1,
    creator: '',
    executeUser: '',
    assistUser: '',
  }
  if (taskName.value) {
    taskQueryParams.taskName = taskName.value
  }

  if (taskActiveName.value === 'create') {
    taskQueryParams.creator = userId
  } else if (taskActiveName.value === 'finishExecute') {
    taskQueryParams.executeUser = userId
    taskQueryParams.executeState = '已完成'
  } else if (taskActiveName.value === 'waitExecute') {
    taskQueryParams.executeUser = userId
    taskQueryParams.executeState = '未完成'
  } else if (taskActiveName.value === 'assist') {
    taskQueryParams.assistUser = userId
  }
  let data = await ProjectTaskApi.getProjectTaskPage(taskQueryParams)
  taskList.value = data.list
  loading.value = false
}

const getSynergyNumber = async () => {
  badgeSynergy.value = await ProjectTaskApi.getSynergyNumber()
  console.log(badgeSynergy.value)
}
getListTask()

const taskFinishStateChange = () => {
  getListTask()

}


const updateFinishState = (event, task) => {
  if (task.creator != userId.toString()) {
    message.error('您不是创建者，不能修改状态')
    return
  }
  form.value = {}
  form.value.id = task.id
  form.value.finishState = event ? '已完成' : '未完成'
  rateVisible.value = true
}

const submitFinish = async () => {
  form.value.params = {column: 'finishState,scoreDesc,score'}
  await ProjectTaskApi.updateProjectTask(form.value)
  message.success("操作成功")
  rateVisible.value = false
  await getListTask()
}

const handleClick = (tab) => {
  taskActiveName.value = tab
  getListTask()
}

const handleMenuPush = (url) => {
  router.push(url)
}

const handleProjectClick = (project) => {
  let id = project.id
  let meta = {
    title: project.projectName
  }

  router.push({name: 'SynergyProjectTaskList', params: {id}, mate: meta})
}
// 生命周期 - 挂载完成

onMounted
(() => {
  getListTask()
  getListProject()
  getSynergyNumber()
})

</script>


<style lang="scss" scoped>


.text-ellipsis {
  width: 180px;
  display: inline-block;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 使用省略号代替超出部分的文本 */
}

.el-divider--horizontal {
  margin: 10px;
}

.box {
  width: 100%;
  height: 100%;
}

.tool-card {
  text-align: center;
  width: 100px;
  height: 80px;
  display: inline-block;
}

.tool-card :hover {
  background-color: #36a3f7;
  color: #ffffff
}


</style>
